<template>
  <ToDoHeader @addTodo="addTodo" />
  <ToDoMain :list="showList" @delToDo="delToDo" />
  <ToDoFooter :lastLength="lastLength" 
  @updateStatus="updateStatus" :status="status" />
</template>

<script setup>
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
import ToDoFooter from './components/ToDoFooter.vue'
import { ref, computed } from 'vue'
const list = ref([
  // id: 唯一标识，text: 内容，done: 是否完成
  { id: 1, name: '晨练', done: false },
  { id: 2, name: '跑5KM', done: false }
])
// 添加逻辑
const addTodo = (name) => {
  const obj = {
    id: ~~(Math.random() * 1000), // 取一个三位数的随机数做为id
    name,
    done: false
  }
  list.value.push(obj);
}
// 删除逻辑
const delToDo = (id) => {
  // 去删除list中的数据
  console.log(id, '===从子组件传过来的id===')
  // 过滤法：把没有匹配到删除id的数据项过滤出来，组成新的数组
  list.value = list.value.filter(item => {
    return item.id !== id;
  })
}
// 计算未完成的项目个数
const lastLength = computed(() => {
  // 获取未完成数组的项目个数
  const notDoneList = list.value.filter(item => {
    return item.done === false;
  })
  // compueted 一定要return。 return的值就是计算属性的结果
  return notDoneList.length;
});

// 筛选
const status = ref('all');
// all 代表全部  active代表未完成   completed代表已完成
const showList = computed(() => {
  if (status.value === 'all') {
    return list.value;
  }
  if (status.value === 'active') {
    return list.value.filter(item => !item.done)
  }
  if (status.value === 'completed') {
    return list.value.filter(item => item.done)
  }
})
// 更新状态，函数的参数status是从子组件传递过来的
const updateStatus = (childStatus) => {
  status.value = childStatus;
}

</script>

<style></style>